<!--{template mobile/frame/header_simple_start}-->
<script src="{MOD_PATH}/js/mobile/pinchzoom.js?{VERHASH}" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/mobile/details.css?{VERHASH}" />
<!--{template mobile/frame/header_simple_end}-->
<div id="dzzoffice">
	<div
		id="DetailPopup"
		class="detail-popup" 
		:class="{'NotFooter':showdata[rid]&&!showdata[rid].data.footer,'full':full}"
		@touchstart="DetailPageTouchStart"
		@touchmove="DetailPageTouchMove" 
		@touchend="DetailPageTouchEnd">
		<!--{template mobile/components/index/JsDetailMessage}-->
		<van-nav-bar class="header-top" :title="rids.indexOf(rid)+1+'/'+rids.length">
			<template #left>
				<div style="width: 25px;text-align: center;height: 25px;line-height: 25px;" @click.stop="DetailNavbarLeftClick">
					<van-icon name="arrow-left" size="18" />
				</div>
				
			</template>
			<template #right>
				<div style="width: 25px;text-align: center;height: 25px;line-height: 25px;" @click.stop="InformationPopup=true">
					<van-icon name="warning-o" size="18" />
				</div>
			</template>
		</van-nav-bar>
		<div class="detail-popup-translate" ref="detail_popup_translate" @click="DetailImageFulloverlay">
			<div 
				class="detail-popup-content" 
				v-for="item in showdata"
				:class="{'prev':item.type=='left','next':item.type=='right','center':item.type=='center','opacity':item.loading}"
				:key="item.data.opentype!='video'?item.data.rid:''"
				:ref="'Detail_'+item.data.rid">
				<template v-if="item.loading">
					<van-loading class="custom-load" size="24px" type="spinner" color="var(--header-text)" vertical>加载中...</van-loading>
				</template>
				<template v-else>
					<div class="detail-popup-img">
						<template v-if="item.data.opentype=='video'">
							<div class="video-box" :style="{'height':item.data.fheight+'px'}">
								<iframe
									style="border: 0px;"
									:src="'index.php?mod=xgplayer&path='+item.data.dpath" 
									width="100%" 
									height="100%"></iframe>
							</div>
						</template>
						<template v-else-if="item.data.opentype=='pdf'">
							<iframe
								style="border: 0px;"
								:src="'index.php?mod=pdf&path='+item.data.dpath" 
								width="100%" 
								height="100%"></iframe>
						</template>
						<template v-else-if="item.data.opentype=='text'">
							<div style="padding: 10px;height: 100%;">
								<iframe
									style="border: 0px;border-radius: 18px;"
									:src="'index.php?mod=textviewer&path='+item.data.dpath" 
									width="100%" 
									height="100%"></iframe>
							</div>
						</template>
						<template v-else-if="item.data.opentype=='other'">
							<div class="img-box" :ref="'BoxImg_'+item.data.rid">
								<img 
									@load="DetailImgload" 
									:src="item.data.icondata" 
									:data-rid="item.data.rid"
									class="image-viewer__img" />
							</div>
						</template>
						<template v-else>
							<div class="img-box" :ref="'BoxImg_'+item.data.rid">
								<img :src="item.data.icondata" class="image-viewer__img thumbnail" />
								<img 
									@load="DetailImgload" 
									:data-rid="item.data.rid"
									:src="item.data.originalimg" 
									class="image-viewer__img opacity" />
							</div>
						</template>
					</div>
				</template>
				
			</div>
		
		</div>
		<div class="footer-tabbar" v-if="showdata[rid] && showdata[rid].data.footer">
			<div class="footer-tabbar-item" v-if="showdata[rid].data.link" @click="DetailFooterClick('link')">
				<i class="ri-links-line"></i>
			</div>
			<div class="footer-tabbar-item" v-if="showdata[rid].data.download" @click="DetailFooterClick('download')">
				<i class="ri-download-2-line"></i>
			</div>
			<div class="footer-tabbar-item" v-if="showdata[rid].data.share" @click="DetailFooterClick('share')">
				<i class="ri-share-line"></i>
			</div>
		</div>
</div>

<script type="text/javascript">
	new Vue({
		el: '#dzzoffice',
		data: function() {
			return $.extend({},{
				rids:[],
				rid:'',
				ridIndex:0,
				dataList:{},
				showdata:{},
				showdataIndex:[],
				PinchZoom:{},
				TouchPage:{
					clickX:0,
					distance:0,
					move:true
				},
				TouchImg:{
					move:false,
				},
				full:false,
				ParamImages:{
					operation:{
						rids:[]
					}
				},
				InformationPopup:false
			});
		},
		watch:{
			rid:{
				handler(val){
					if(val){
						this.ParamImages.operation.rids = [val];
					}else{
						this.ParamImages.operation.rids = [];
					}
					
				},
				deep:true
			},
			full:{
				handler(val){
					var self = this;
					for(var i in this.PinchZoom){
						var item = this.PinchZoom[i];
							if(val){
								item.enable();
							}else{
								item.disable();
							}
					}
					self.$nextTick(function(){
						var boxH = $('.detail-popup-content').height();
						$('.img-box').height(boxH);
						
						
					})
					
				},
				deep:true
			},
			showdata:{
				handler(val){
					var self = this;
					self.$nextTick(function(){
						for(var i in val){
							var item = val[i];
							var rid = item.data.rid;
							if(!item.loading && (item.data.opentype == 'image' || item.data.opentype == 'other')){
								if(self.PinchZoom[rid]){
									if(!self.full){
										self.PinchZoom[rid].disable()
									}
								}else{
									if(self.$refs['BoxImg_'+rid]){
										var dom = $(self.$refs['BoxImg_'+rid][0]);
										dom.height($('.detail-popup-content').height());
										self.PinchZoom[rid] = new PinchZoom(self.$refs['BoxImg_'+rid][0]);
										if(!self.full){
											self.PinchZoom[rid].disable()
										}
									}
								}
							}
						}
					})
					
				},
				deep:true,
			},
		},
		computed: {
	
		},
		created() {
			var arr = (location.hash || "").replace(/^\?/,'').split("&");
			if(arr.length){
				rid=arr[0].replace("#","").split('=')[1];
				this.rid = rid;
				this.ParamImages.operation.rids = [rid];
			}
			var rids = window.localStorage.getItem('imgs');
			if(rids && rids.indexOf(this.rid)>-1){
				this.rids = rids.split(',');
			}
			this.handleRidsOrder();
		},
		methods:$.extend({},{
			DetailImgload(event){
				var self = this;
				$(event.target).removeClass('opacity').siblings('.thumbnail').remove();
			},
			DetailImageFulloverlay(){
				if(this.full){
					if(this.PinchZoom[this.rid]){
						if(this.PinchZoom[this.rid].zoomFactor>1){
							
						}else{
							this.full = false;
						}
					}else{
						this.full = false;
					}
					
				}else{
					this.full = true;
				}
			},
			DetailPageTouchStart(event){
				var self = this;
				if(self.showdata[self.rid].loading || self.TouchImg.move || self.InformationPopup){
					self.TouchPage.move = false;
					return false;
				}
				self.TouchPage.clickX = event.touches[0].pageX;
				self.TouchPage.distance = 0;
				self.TouchPage.move = true;
			},
			DetailPageTouchMove(event){
				var self = this;
				if(self.showdata[self.rid].loading || self.TouchImg.move || self.InformationPopup){
					self.TouchPage.move = false;
					return false;
				}
				event.preventDefault();
				var sectouch = event.touches[0];
				self.TouchPage.distance = sectouch.pageX - self.TouchPage.clickX;
				var Index = self.showdataIndex.indexOf(self.rid);
				if(self.TouchPage.distance>0){
					if(self.ridIndex == 0){
						self.$toast('已经是第一张');
						self.TouchPage.move = false;
						return false;
					}
					var firstrid = self.showdataIndex[Index-1];
					if(self.showdata[firstrid] && self.showdata[firstrid].loading){
						self.TouchPage.move = false;
						return false;
					}
				}
				if(self.TouchPage.distance<0){
					if(self.ridIndex == self.rids.length-1){
						self.$toast('已经是最后一张');
						self.TouchPage.move = false;
						return false;
					}
					
					var tworid = self.showdataIndex[Index+1];
					if(self.showdata[tworid] && self.showdata[tworid].loading){
						self.TouchPage.move = false;
						return false;
					}
					
				}
				self.TouchPage.move = true;
				$(self.$refs['detail_popup_translate']).css("transform","translate3d("+self.TouchPage.distance+"px,0,0)");
			},
			DetailPageTouchEnd(event){
				var self = this;
				if(!self.TouchPage.move || self.InformationPopup){
					return false;
				}
				var dom = self.$refs['detail_popup_translate'];
				var screenWidth = document.body.clientWidth+10;
				$(dom).css("transition","transform 0.2s cubic-bezier(0,0,0.4,1) 0s,-webkit-transform 0.2s");
				if(Math.abs(self.TouchPage.distance)>100){
					var Index = self.showdataIndex.indexOf(self.rid);
					if(self.TouchPage.distance>0){
						$(self.$refs['detail_popup_translate']).css("transform","translate3d("+(screenWidth)+"px,0,0)");
						self.rid = self.showdataIndex[Index-1];
						self.ridIndex -= 1;
					}else{
						self.rid = self.showdataIndex[Index+1];
						self.ridIndex += 1;
						$(dom).css("transform","translate3d("+(-screenWidth)+"px,0,0)");
					}
					setTimeout(function(){
						$(dom).css({
							transform:"none",
							transition:''
						});
						self.handleRidsOrder();
					},300);
				}else{
					$(dom).css("transform","translate3d(0,0,0)");
					setTimeout(function(){
						$(dom).css({
							transform:"none",
							transition:''
						});
					},300);
				}
				
			},
			
			handleRidsOrder(){
				var self = this;
				var str = {};
				var index = self.rids.indexOf(self.rid);
				// var Oldshowdata = JSON.parse(JSON.stringify(self.showdata));
				var NewShowData = {};
				var showdataIndex = [];
				self.ridIndex = index;
				showdataIndex = [self.rid];
				// self.showdata = {};
				
				
				if(self.dataList[self.rid]){
					NewShowData[self.rid] = {
						type:'center',
						loading:false,
						data:self.dataList[self.rid]
					};
				}else{
					NewShowData[self.rid] = {
						type:'center',
						loading:true,
						data:{}
					};
				}
				if(self.rids[index-1]){
					var first = self.rids[index-1];
					
					showdataIndex.unshift(first);
					if(self.dataList[first]){
						NewShowData[first] = {
							type:'left',
							loading:false,
							data:self.dataList[first]
						};
					}else{
						NewShowData[first] = {
							type:'left',
							loading:true,
							data:{}
						};
					}
				}
				if(self.rids[index+1]){
					var two = self.rids[index+1];
					showdataIndex.push(two);
					if(self.dataList[two]){
						NewShowData[two] = {
							type:'right',
							loading:false,
							data:self.dataList[two]
						};
					}else{
						NewShowData[two] = {
							type:'right',
							loading:true,
							data:{}
						};
					}
				}
				self.showdataIndex = showdataIndex;
				self.showdata = NewShowData;
				var dels = [];
				for(var s in self.PinchZoom){
					if(showdataIndex.indexOf(s)<0){
						dels.push(s)
					}
				}
				if(dels.length){
					for(var h in dels){
						if(self.PinchZoom[h]){
							delete self.PinchZoom[h];
						}
					}
				}
				for(var i in NewShowData){
					if(NewShowData[i].loading){
						this.GetData(i);
					}
				}
				
			},
			GetData(rid){
				var self = this;
				$.post(MOD_URL+'&op=details&operation=fetch',{
					rid:rid
				},function(json){
					var item = json.resourcesdata;
					// document.title = item.name+'-$_G[setting][sitename]';
					var colors = [];
					
					if(item.colors){
						for(var c in item.colors){
							colors.push(item.colors[c]);
						}
					}
					item.colors = colors;
					var tags = [];
					if(item.tag){
						for(var t in item.tag){
							var tstr = {
								key:t,
								val:item.tag[t]
							};
							tags.push(tstr);
						}
					}
					item.tag = tags;
					
					var foldernames = [];
					if(item.foldernames){
						for(var f in item.foldernames){
							var fstr = {
								key:f,
								val:item.foldernames[f]
							};
							foldernames.push(fstr);
						}
					}
					item.foldernames = foldernames;
					item.download = parseInt(item.download);
					item.share = parseInt(item.share);
					// if(item.link || item.share || item.download){
					// 	item['footer'] =  true;
					// }else{
					// 	item['footer'] = false;
					// }
					item['footer'] =  true;
					// if(item.opentype == 'other' || item.opentype == 'image'){
					// 	var size = self.DetailImgSize(item);
					// 	item['width'] = size['width'];
					// 	item['height'] = size['height'];
					// 	item['left'] = size['left'];
					// 	item['top'] = size['top'];
					// }
					if(item.opentype == 'video'){
						var boxW = document.body.clientWidth;
						var ra = boxW/parseFloat(item['width'])
						item['fwidth'] = boxW;
						item['fheight'] = ra*parseFloat(item['height']);
					}
					self.showdata[rid].loading = false;
					self.showdata[rid].data = item;
					self.dataList[item.rid] = item;
					self.$forceUpdate();
					
				},'json');
			},
			DetailImgSize(item){
				var str = {
					width:0,
					height:0,
					left:0,
					top:0
				};
				var boxW = document.body.clientWidth;
				var boxH = document.body.clientHeight
				if(!this.full){
					if(item.footer){
						boxH -= 106;
					}
				}
				var imgW = parseFloat(item.width);
				var imgH = parseFloat(item.height);
				
				var ra1 = boxW/boxH;
				var ra2 = imgW/imgH;
				
				
				if(ra2 > ra1){
					if(imgW>boxW){
						str.width = boxW;
						var ratio = boxW/imgW;
						str.height = ratio*imgH;
					}else{
						str.width = imgW;
						str.height = imgH;
					}
					
				}else{ 
					if(imgH>boxH){
						str.height = boxH;
						var ratio = boxH/imgH;
						str.width = ratio*imgW;
					}else{
						str.width = imgW;
						str.height = imgH;
					}
				}
				str.left = (boxW-str.width)/2;
				str.top = (boxH-str.height)/2;
				return str;
			},
			DetailFooterClick(type){
				var self = this;
				var rid = self.rid;
				if(!self.showdata[rid]){
					self.$toast({
						message: '参数错误',
						icon: 'cross',
					});
					return false;
				}
				if(type == 'link'){
					window.open(self.showdata[rid].data.link);
					return false;
				}
				if(type == 'download'){
					if (self.showdata[rid].data.dpath) {
						window.open(SITEURL + MOD_URL + '&op=download&dpath=' + self.showdata[rid].data.dpath)
					} else {
						self.$toast({
						  message: '数据错误',
						  icon: 'cross',
						});
					}
					return false;
				}
				if(type == 'share'){
					if (self.showdata[rid].data.rid) {
						$.post('{MOD_URL}&op=ajax&operation=createshare', {
							rid: rid
						}, function(data) {
							if (data.success) {
								self.$dialog.confirm({
									title: '分享成功',
									message: data.success,
									confirmButtonText:'复制地址',
									cancelButtonText:'关闭'
								}).then(function() {
									self.CommonCopyTxt(data.success);
								}).catch(function() {
								    // on cancel
								 });
							} else {
								self.$toast({
								  message: '分享失败',
								  icon: 'cross',
								});
							}
						}, 'json')
					} else {
						self.$toast({
						  message: '数据错误',
						  icon: 'cross',
						});
					}
				}
			},
			DetailMessageSearch(type,val){
				var self = this;
				var item = self.showdata[self.rid].data;
				switch(type){
					case 'color':
						window.location.href = SITEURL+'#appid=' + item.appid + '&color=#' + val;
						// window.location.reload();
					break;
					case 'tag':
						window.location.href = SITEURL+'#appid=' + item.appid + '&tag=' + val;
						// window.location.reload();
					break;
					case 'link':
						window.open(val);
					break;
					case 'classify':
						window.location.href = SITEURL+'#appid=' + item.appid + '&classify=' + val;
						// window.location.reload();
					break;
					case 'copy':
						self.CommonCopyTxt(val);
					break;
				}
				
			},
			DetailNavbarLeftClick(){
				window.history.go(-1);
			},
			CommonCopyTxt(text){
				var self = this;
				var input = document.createElement('input'); input.setAttribute('id', 'copyInput');
				input.setAttribute('value', text);
				document.getElementsByTagName('body')[0].appendChild(input);
				document.getElementById('copyInput').select();
				document.execCommand('copy');
				document.getElementById('copyInput').remove();
				self.$toast.success('复制成功');
			}
		}),
		mounted() {
		}
	});
</script>
<!--{template mobile/frame/footer_simple}-->
